<template>
  <div class="layout-warpper content">
    <div class="layout-header content-header">
      <el-form ref="formSearch" :model="formSearch" :rules="rules" :inline="true" class="form-search" size="normal">
        <el-form-item label="时间选择">
          <el-date-picker
            v-model="formSearch.date"
            :clearable="true"
            type="daterange"
            align="right"
            style="width: 240px"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleSearchFn"
          />
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select
            v-model="formSearch.projectType"
            class="ui-w120"
            option-max-width="180px"
            placeholder="请选择"
            clearable
            @change="handleSearchFn()"
          >
            <el-option key label="全部" value></el-option>
                       <el-option v-for="(value, key) in typeJSGC" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="search">
          <!-- clearable -->
          <el-input
            v-model.trim="formSearch.search"
            style="background: #1890ff"
            placeholder="项目/标段/名称/编号/人员姓名"
            class="ui-w320"
            @keydown="submitSearchFn"
          >
            <el-button slot="append" type="primary" icon="el-icon-search" @click="submitSearchFn" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName"  align="left" header-align="left"  label="项目名称"  min-width="100" max-width="200" show-overflow-tooltip />
        <el-table-column prop="projectCode"  align="left" header-align="left" label="项目编码"  />
        <el-table-column prop="projectType"   align="left" header-align="left" label="项目类型" :formatter="formatterTypeJSGC" />
        <el-table-column prop="bidName"   align="left" header-align="left" min-width="100" max-width="200" label="标段名字" show-overflow-tooltip />
        <el-table-column prop="bidCode"   align="left" header-align="left" label="标段编码"  />
        <el-table-column prop="pbRoomName"  align="left" header-align="left" label="标室信息" />
        <el-table-column prop="zjCount"   align="left" header-align="left" width="80" label="专家数量" />
        <el-table-column prop="pbStartTime"  align="left" header-align="left" width="150" label="评标时间" show-overflow-tooltip />
        <el-table-column prop="alarmCount"  align="left" header-align="left" label="预警数量" width="80"  show-overflow-tooltip />
        <el-table-column label="操作" align="center" header-align="center" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="handleClickWanGerFn(scope.row)">预警事件</el-button>
            <el-button type="text" size="default" @click="allocateUserClickFn(scope.row)">轨迹查询</el-button>
            <el-button type="text" size="default" @click="handleClickXMFn(scope.row)">项目详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="layout-footer ui-pt5">
      <!-- {{ pageObj.total + " " + pageObj.pageSize }} -->
      <wpagination
        style="text-align: right"
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :page-sizes="pageObj.pageSizes"
        @pagination="subtaskListFn"
      />
    </div>
    <DialogWanger ref="DialogWanger" :visible.sync="dialogWanger" />
    <DialogXmMsg ref="DialogXmMsg" :visible.sync="dialogXmMsg" />
  </div>
</template>
<script>
  import {trackPageAlarmProject} from "@/api/pageStats";
  import DialogXmMsg from '../components/dialog_xm_msg'
  import DialogWanger from '../components/dialog_wanger'
  export default {
    filters: {},
    components: {
      DialogXmMsg,
      DialogWanger
    },
    data() {
      // 验证码校验
      const validateCode = (rule, value, callback) => {
        if (value === "" || value === undefined) {
          callback(new Error("验证码不能为空"));
        } else if (value !== this.identifyCode) {
          callback(new Error("验证码不正确"));
        } else {
          callback();
        }
      };
      return {
        typeJSGC:{
          'JSGC':'建设工程',
          'ZFCG':'政府采购'
        },
        dialogXmMsg:false,
        dialogWanger:false,
        editTempl: true,
        tableLoading: false,
        pageObj: {
          total: 1,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        formSearch: {
          // date: [this.$moment(new Date()).format("yyyy-MM-DD"), this.$moment(new Date()).format("yyyy-MM-DD")],
          date: [],
          search: "",
          projectType:''

        },
        // scfsType: { "1": "资格预审", "2": "资格后审" },
        // cgfsType: { "1": "公开招标", "2": "邀请招标" },
        rules: {
          // date: [{ required: true, message: "日期不能为空", trigger: "blur" }],
          // keyWord: [{ required: true, message: "key不能为空", trigger: "blur" }],
        },
        tableData: [],
        pageSizes: [10, 20, 30],
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        }
      };
    },
    created() {
      this.subtaskListFn()
    },
    methods: {
      async  handleClickXMFn({projectId}) {
        await  this.$refs['DialogXmMsg'].getXmInfo(projectId)
        this.dialogXmMsg = true ;
      },
     async handleClickWanGerFn(val) {
        await  this.$refs['DialogWanger'].gtTrackListAlarm(val)
        this.dialogWanger = true;
      },
      allocateUserClickFn(row) {
        this.$router.push({path:"/wintessquery/trajectoryXmDetail",query:row})
      },
      async jzruserlistFn() {
        this.jzruserlist = [];
        const params = {};
        const res = await jzruserlit(params);
        if (res.stat === 1) {
          this.jzruserlist = res.data.userlist;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      // 格式项目类型
      formatterTypeJSGC(row, col, val) {
        let str = "";
        if (val) {
          str = this.typeJSGC[val];
        }
        return str;
      },
      // 获取数据
      async subtaskListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          const params = {
              projectType: this.formSearch.projectType,
              search:this.formSearch.search,
              currentPage:this.pageObj.currentPage,
              pageSize:this.pageObj.pageSize,
          }

          if (this.formSearch.date && this.formSearch.date.length) {
            params.startTime = `${this.formSearch.date[0]} 00:00:00`; // 起始时间
            params.endTime = `${this.formSearch.date[1]} 23:59:59`; //
          }
          const res = await trackPageAlarmProject(params);
          this.tableLoading = false;
          if (res.code === 0) {
            // if (res.data.totalElements === 0 && this.pageObj.currentPage !== 0) {
            //   this.pageObj.currentPage = 0;
            //   this.$nextTick(() => {
            //     this.subtaskListFn();
            //   });
            //   return;
            // }
            this.tableData = res.data.data;
            this.pageObj.total = res.data.pageBean.count;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.tableLoading = false;
        }
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      // table 展开收起
      expandChangeFn(row) {
        if (!row.children) {
          const o = {
            witnessTaskId: row.witnessTaskId
          };
          let index = "";
          this.tableData.some((item, i) => {
            if (item.witnessTaskId === row.witnessTaskId) {
              index = i;
            }
          });
          this.subtaskListFn(o, index);
        }
      },
      handleSearchFn() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.subtaskListFn();
        // await this.taskListFn();
      },
      statusChangeFn() {
        this.handleSearchFn();
      },
      recordClickFn({ row }) {
        this.subtaskRow = row;
        this.recordShow = true;
      },
      updateClickFn() {},
      submitSearchFn() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.handleSearchFn();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    //采用flex布局，代替calc属性 by link 20211020
    display: flex;
    flex-flow: column;
  }
  .content-header {
    margin-top: 10px;
  }
  .form-search {
    padding-top: 10px;
    padding-left: 20px;
    background: #efefef;
    margin-bottom: 10px;
  }
  .tag-list {
    padding: 0 10px 10px;
  }
  .task-status {
    span {
      background: #ccc;
      border-radius: 50%;
      display: inline-block;
      margin-right: 4px;
      width: 24px;
      height: 24px;
      font-size: 14px;
      text-indent: 5px;
      line-height: 24px;
      overflow: hidden;
      color: #fff;
    }
    .WITNESSING {
      background: $WITNESSING;
    }
    .WITNESS_FINISHED {
      background: $WITNESS_FINISHED;
    }
    .ASSIGNED {
      background: $ASSIGNED;
    }
    .UNASSIGNED {
      background: $UNASSIGNED;
    }
  }
  .cancel-dialog {
    .info {
      padding-left: 28px;
      position: relative;
      i {
        position: absolute;
        top: 0;
        left: 0;
        color: #e6ad00;
        font-size: 18px;
        vertical-align: top;
      }
    }
  }
</style>
